<template>
	<view>
		<!-- <BackTabBar title="注册账号" /> -->
		<view class="content">
			<view class="login_from">

				<view class="login_from_input">
					<view class="login_from_name">手机号</view>
					<view class="login_from_fun"><input v-model="phone" type="text" placeholder="请输入手机号码"></view>
				</view>

				<view class="login_from_input">
					<view class="login_from_name">验证码</view>
					<view class="login_from_fun">
						<input v-model="code" style="width: 40%; text-align: left" type="digit" maxlength="6"
							placeholder="验证码">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#d1100b'}"
							@click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>

				<view class="login_from_input">
					<view class="login_from_name">密码</view>
					<view class="login_from_fun"><input v-model="password" type="digit" :password="passwordShow"
							placeholder="请输入登录密码"></view>
					<uni-icons :type="passwordShow?'eye':'eye-slash'" @click="passwordShow=!passwordShow"></uni-icons>
				</view>


				<view class="login_from_dl">
					<button @click="denglu" style="font-weight: 600; background-color:#D1100B;">注 册</button>
				</view>

				<view class="logo_xieyi">
					<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
					<view class="logo_text">请勾选并阅读<text @click="toCPage(1)">《服务协议》</text>及<text
							@click="toCPage(0)">《隐私协议》</text></view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	const reg = /^1[345789]\d{9}$/; // 手机号正则
	export default {
		components: {
			// BackTabBar
		},
		data() {
			return {
				phone: '',
				code: '',
				password: '',
				gouxSta: true,
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码',
				passwordShow: true,
				options: {},
				codeData: {}
			}
		},
		onLoad(options) {
			if (options.openid) this.options = options
			else this.options = {}
			console.log(this.options);
		},
		methods: {
			toCPage(e) {
				uni.navigateTo({
					url: '/pages/user/customerPage?Type=' + e
				})
			},
			moutcl() {
				this.gouxSta = !this.gouxSta
			},

			denglu() {
				if (!this.gouxSta) return uni.showToast({
					"title": "请阅读并勾选用户协议",
					"icon": 'none'
				})
				if (!reg.test(this.phone) || !this.code || !this.password) return uni.showToast({
					icon: 'none',
					title: '请完善注册信息'
				})
				this.$http("Base_Manage/Home/AddVIPUserInfoData", {
					Phone: this.phone,
					Password: this.password,
					SmsCode: this.code,
					Name: this.phone,
					NickName: this.phone,
					...this.options,
					...this.codeData
				}).then(res => {
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '注册成功'
						})
						uni.setStorageSync('userName', this.Phone)
						uni.setStorageSync('password', this.password)
						uni.setStorageSync('tokenKey', 'Bearer ' + res.Data.Token);
						this.getUserInfo()

					} else {
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$http('Base_Manage/Home/GetAppOperatorInfo').then(res => {
					console.log('获取用户信息', res)
					uni.setStorageSync('userInfo', res.Data)
					uni.reLaunch({
						url: '/pages/index/index'
					})
				})
			},
			async Qzyzm() {
				if (this.QzyzmStare == false) {
					console.log(this.phone);
					if (!reg.test(this.phone)) return uni.showToast({
						icon: 'none',
						title: '请检查您的手机号是否输入正确'
					})
					let result = await this.$http('Base_Manage/Home/ValidateVIPUserPhone?phone=' + this.phone)
					if (result.Success && !result.Data) return uni.showToast({
						icon: 'none',
						title: '当前手机号已完成注册'
					})
					var num = 60;
					this.$http("Base_Manage/Home/GetShortMessage?Phone=" + this.phone + "&TemplateCode=SMS_274570710")
						.then(res => {
							if (res.Success) {
								this.codeData = JSON.parse(res.Data)
								uni.showToast({
									icon: 'none',
									title: '短信发送成功'
								})
								this.Qztime = '60';
								this.Qztext = 's后获取';
								this.QzyzmStare = true;
								var interval = setInterval(() => {
									--this.Qztime
								}, 1000)
								setTimeout(() => {
									clearInterval(interval)
									this.Qztext = '获取验证码'
									this.Qztime = ''
									this.QzyzmStare = false
								}, 60000)
							} else {
								uni.showToast({
									icon: 'none',
									title: res.Msg
								})
							}
						})
				}
			},

		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
		font-size: 32rpx;
		font-weight: bold;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
	}


	.login_from_dl {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 150upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #66afff;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 27rpx;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 26rpx;
		margin-right: 1%;
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.cuIcon-squarecheckfill {
		color: #66afff;
	}

	.logo_text text {
		color: #d1100b;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #d1100b;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 160rpx;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #d1100b;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.regFrom_tom_yzlabel {
		width: 88px;
		text-align: center;
	}
</style>